$(() => {
  let back = $('.back');
  //  导航栏点击
  $('#navL1').on('click', function () {
    $(this).css('background', 'url(./images/home/菜单按钮_左侧_p.png) no-repeat');
    $('#navL2').css('background', 'url(./images/home/菜单按钮_左侧_n.png) no-repeat');
    $('#navR1').css('background', 'url(./images/home/菜单按钮_右侧_n.png) no-repeat');
    $('#navR2').css('background', 'url(./images/home/菜单按钮_右侧_n.png) no-repeat');
    $(this).css('background-size', '100% 100%');
    $('#office').show();
    $('#control').hide();
    $('#analysis').hide();
  });

  $('#navL2').on('click', function () {
    $(this).css('background', 'url(./images/home/菜单按钮_左侧_p.png) no-repeat');
    $('#navL1').css('background', 'url(./images/home/菜单按钮_左侧_n.png) no-repeat');
    $('#navR1').css('background', 'url(./images/home/菜单按钮_右侧_n.png) no-repeat');
    $('#navR2').css('background', 'url(./images/home/菜单按钮_右侧_n.png) no-repeat');
    $(this).css('background-size', '100% 100%');
    $('#office').hide();
    $('#control').show();
    $('#analysis').hide();
  });

  $('#navR2').on('click', function () {
    $(this).css('background', 'url(./images/home/菜单按钮_右侧_p.png) no-repeat');
    $('#navL1').css('background', 'url(./images/home/菜单按钮_左侧_n.png) no-repeat');
    $('#navR1').css('background', 'url(./images/home/菜单按钮_右侧_n.png) no-repeat');
    $('#navL2').css('background', 'url(./images/home/菜单按钮_左侧_n.png) no-repeat');
    $(this).css('background-size', '100% 100%');
    $('#office').hide();
    $('#control').hide();
    $('#analysis').show();
  });

  back.on('mousedown', function () {
    $(this).css('background', 'url(./images/home/icon_还原_p.png) no-repeat');
    $(this).css('background-size', '100% 100%');
  });

  back.on('mouseup', function () {
    $(this).css('background', 'url(./images/home/icon_还原_n.png) no-repeat');
    $(this).css('background-size', '100% 100%');
  });

  // 完成率图
  let panelOption = {
    tooltip: {
      trigger: 'item',
      formatter: '{a} <br/>{b} : {c} ({d}%)'
    },
    color: ['#519df6', '#f8b811', '#d42509'],
    series: [
      {
        name: '完成率',
        type: 'pie',
        radius: '70%',
        center: ['50%', '60%'],
        data: [
          {value: 65, name: '天气'},
          {value: 10, name: '其他'},
          {value: 25, name: '故障'}
        ],
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
          }
        }
      }
    ]
  };
  let panel = echarts.init(document.getElementById('panel'));
  panel.setOption(panelOption);
  let panelCenter = echarts.init(document.getElementById('panel-center'));
  panelCenter.setOption(panelOption);

  // 倒计时
  let showtime = function (date) {
    let nowTime = new Date(),  //获取当前时间
      endTime = new Date(date);  //定义结束时间
    let leftTime = endTime.getTime() - nowTime.getTime(),  //距离结束时间的毫秒数
      leftH = Math.floor(leftTime / (1000 * 60 * 60)) < 10 ? '0' + Math.floor(leftTime / (1000 * 60 * 60)) : Math.floor(leftTime / (1000 * 60 * 60)),  //计算小时数
      leftM = Math.floor(leftTime / (1000 * 60) % 60) < 10 ? '0' + Math.floor(leftTime / (1000 * 60) % 60) : Math.floor(leftTime / (1000 * 60) % 60),  //计算分钟数
      leftS = Math.floor(leftTime / 1000 % 60) < 10 ? '0' + Math.floor(leftTime / 1000 % 60) : Math.floor(leftTime / 1000 % 60);  //计算秒数
    return {h: leftH, m: leftM, s: leftS};  //返回倒计时的字符串
  };

  setInterval(function () {
    $('.nextTime>p:nth-child(2)>span:nth-child(1)').text(showtime('2021/9/1').h);
    $('.nextTime>p:nth-child(2)>span:nth-child(3)').text(showtime('2021/9/1').m);
    $('.nextTime>p:nth-child(2)>span:nth-child(5)').text(showtime('2021/9/1').s);

    $('.weatherTime > div:nth-child(1)>p:nth-child(1)').text(getTime());
    $('.weatherTime > div:nth-child(1)>p:nth-child(2)').text(getDate());
    $('#time').text(getFullDate());
    $('#c_time').text(getFullDate());
  }, 1000);

  // 获取天气
  getWeather('长春', 'weather_cc_', 'pic_cc_', 2);
  getWeather('长春', 'weather_cc_center', 'pic_cc_center', 2);

  getWeather("长春", "weather_cc", "pic_cc", 1);
  getWeather("大连", "weather_dl", "pic_dl", 1);
  getWeather("石家庄", "weather_sjz", "pic_sjz", 1);
  getWeather("包头", "weather_bt", "pic_bt", 1);
  getWeather("刚察", "weather_qhh", "pic_qhh", 1);
  getWeather("南通", "weather_nt", "pic_nt", 1);
  getWeather("广州", "weather_gz", "pic_gz", 1);
  getWeather("南宁", "weather_nn", "pic_nn", 1);
  getWeather("呼伦贝尔", "weather_hlbe", "pic_hlbe", 1);
  getWeather("敦煌", "weather_dh", "pic_dh", 1);

  getWeather("长春", "centerWeather_cc", "centerPic_cc", 2);
  getWeather("大连", "centerWeather_dl", "centerPic_dl", 2);
  getWeather("石家庄", "centerWeather_sjz", "centerPic_sjz", 2);
  getWeather("包头", "centerWeather_bt", "centerPic_bt", 2);
  getWeather("刚察", "centerWeather_qhh", "centerPic_qhh", 2);
  getWeather("南通", "centerWeather_nt", "centerPic_nt", 2);
  getWeather("广州", "centerWeather_gz", "centerPic_gz", 2);
  getWeather("南宁", "centerWeather_nn", "centerPic_nn", 2);
  getWeather("呼伦贝尔", "centerWeather_hlbe", "centerPic_hlbe", 2);
  getWeather("敦煌", "centerWeather_dh", "centerPic_dh", 2);


  //  轮播图
  let speed = 1500; //  轮播速度
  let m = 0;
  let playTimer = setInterval(runPlay, speed);

  function runPlay() {
    if (m > 11) {
      m = 0;
    }
    controlPlay(m);
    m++;
  }

  function controlPlay(n) {
    $('#smallPlayBox img').removeClass('current').eq(n).addClass('current');
    $('#smallLiList li').removeClass('current').eq(n).addClass('current');
    $('#bigPlayBox img').removeClass('current').eq(n).addClass('current');
    $('#bigLiList li').removeClass('current').eq(n).addClass('current');
  }

  $('#smallLiList li').on('click', function () {
    controlPlay($(this).index());
    m = $(this).index() + 1;
  });
  $('#bigLiList li').on('click', function () {
    controlPlay($(this).index());
    m = $(this).index() + 1;
  });
  $('.playBox').on({
    'mouseenter': function () {
      //  停止定时
      clearInterval(playTimer);
    },
    'mouseleave': function () {
      //  开始定时
      playTimer = setInterval(runPlay, speed);
    }
  });

  //  中心控制
  $(back).on('click', function () {
    $('#lt,#lb,#rt,#rb').removeClass('centerShow');
    $('#cesiumContainer').addClass('centerShow');
  });
  $('#ltClick').on('click', function () {
    $('#lt').addClass('centerShow');
    $('#cesiumContainer,#lb,#rt,#rb').removeClass('centerShow');
    setTimeout(panelCenter.resize, 0);
  });
  $('#lbClick').on('click', function () {
    $('#lb').addClass('centerShow');
    $('#cesiumContainer,#lt,#rt,#rb').removeClass('centerShow');
  });
  $('#rbClick').on('click', function () {
    $('#rb').addClass('centerShow');
    $('#cesiumContainer,#lt,#rt,#lb').removeClass('centerShow');
  });
});